<template>
  <a-modal
    v-model="showModal"
    width="660px"
    title="处理客诉"
    @ok="confirmHandleComplaints"
  >
    <a-spin :spinning="loading">
      <a-form :class="{'inline-form': isView}" v-if="showModal" :form="form">
        <a-form-item label="处理结果">
          <a-textarea
            v-if="!isView"
            rows="4"
            :max-length="300"
            placeholder="请输入处理结果"
            v-decorator="[
              'processingResult',
              {rules: [{required: true, whitespace: true, message: '请输入处理结果'}], initialValue: ''}
            ]"
          />
          <section v-else>{{ data.processingResult }}</section>
        </a-form-item>
        <a-form-item :help="help" :validate-status="validateStatus" style="display: block;" :label="`补充图片${isView ? '' : `${complaintsPics.length}/10`}`">
          <section class="flex">
            <UploadWithPreview
              :scene="5"
              style="margin-left: 0;"
              ref="uploadFile"
              :file-length="isView ? 0 : 10"
              :options="{showUploadList: {showRemoveIcon: !this.isView}}"
              @uploadSuccess="uploadSuccess"
              @removeFile="removeFile"
            />
          </section>
        </a-form-item>
      </a-form>
    </a-spin>
    <template v-if="isView" #footer>
      <a-button @click="showModal = false" type="primary">好的</a-button>
    </template>
  </a-modal>
</template>
<script>
import {complaintsResult, getComplainResult} from '@/api/order/complaints'
import UploadWithPreview from '@/components/Upload/multipleShowList'
export default {
  name: 'HandleCustomerComplaints',
  components: {UploadWithPreview},
  data() {
    return {
      id: '',
      isView: false,
      showModal: false,
      loading: false,
      data: {},
      help: '',
      validateStatus: '',
      form: this.$form.createForm(this),
      complaintsPics: []
    }
  },
  watch: {
    showModal(val) {
      if (!val) {
        this.isView = false
        this.resetPicValidateStatus()
      }
    }
  },
  methods: {
    edit(id) {
      this.showModal = true
      this.id = id
    },
    view(id) {
      this.isView = true
      this.loading = true
      this.showModal = true
      getComplainResult({id}).then(data => {
        this.data = data
        this.$refs.uploadFile.setFileList(data.processingImgUrl.split(',').filter(e => e).map((e, i) => ({
          thumbnailPath: e,
          name: 'image.png',
          status: 'done',
          url: e,
          uid: i
        })))
      }).finally(() => this.loading = false)
    },
    removeFile(data) {
      this.complaintsPics.splice(this.complaintsPics.findIndex(item => item.uid === data.uid), 1)
    },
    uploadSuccess(data) {
      this.resetPicValidateStatus()
      this.complaintsPics = data
    },
    confirmHandleComplaints() {
      this.form.validateFields((err, values) => {
        // if (this.complaintsPics.length === 0) {
        //   this.help = '请上传补充图片'
        //   this.validateStatus = 'error'
        //   return
        // }
        if (!err) {
          this.resetPicValidateStatus()
          this.loading = true
          complaintsResult({
            id: this.id,
            processingResult: values.processingResult.trim(),
            processingImgUrl: this.complaintsPics.map(e => e.url).join(',')
          }).then(() => {
            this.$message.success('处理成功！')
            this.$emit('getData')
            this.form.resetFields()
            this.complaintsPics = []
            this.showModal = false
          }).finally(() => this.loading = false)
        }
      })
    },
    resetPicValidateStatus() {
      this.help = ''
      this.validateStatus = undefined
    }
  }
}
</script>
